<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple" style="background:#fb6d49;">
            <div>
              <span class="el-icon-camera" />
            </div>
            <div>
              <h6 class="ppp">管理员用户</h6>
              <h6 class="pp">{{ list.admin_num }}名</h6>

            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple" style="background:#67c23a;">
            <div>
              <span class="el-icon-camera" />
            </div>
            <div>
              <h6 class="ppp">平台注册用户</h6>
              <h6 class="pp">{{ list.advpos_num }}名</h6>

            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple" style="background:#e6a23c;">
            <div>
              <span class="el-icon-camera" />
            </div>
            <div>
              <h6 class="ppp">平台文章总数</h6>
              <h6 class="pp">{{ list.article_num }}名</h6>

            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple" style="background:#3a7ce7;">
            <div>
              <span class="el-icon-camera" />
            </div>
            <div>
              <h6 class="ppp">广告位</h6>
              <h6 class="pp">{{ list.advimg_num }}名</h6>

            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 第二行 -->
    <el-row :gutter="20" style="background:#fff;" class="elrow">
      <el-col :span="8">

        <div class="mobileNumber">
          <h6>最新注册新用户</h6>
          <div v-for="item in newest" :key="item.id" class="sonmobile">
            <span class="span">{{ item.username }}</span>
            <span>{{ item.sex === 1? '女':'男' }}</span>
          </div>
        </div>

      </el-col>

      <!-- 第一个 -->
      <el-col :span="8">
        <div class="mobileNumber">
          <h6>点赞文章排行</h6>
          <div v-for="item in hot_article" :key="item.id" class="sonmobile">
            <span class="span">{{ item.title }}</span>
          </div>
        </div>
      </el-col>

      <!-- 第三个 -->
      <el-col :span="8">
        <div class="mobileNumber">
          <h6>用户性别分析</h6>
          <div ref="box" class="sonmobile" style="height:280px" />
        </div>
      </el-col>
    </el-row>

    <!-- 三 -->
    <el-card>
      <div slot="header" class="header">
        各分类文章发布数量
      </div>
      <div ref="bbooxx" style="height:400px;" />
    </el-card>
  </div>
</template>

<script>
import * as Echarts from 'echarts'
import radarData from '@/views/dashboard/components/radarData'
import histogram from '@/views/dashboard/components/histogram'
import { gettagListApi } from '@/api/dashboard'
export default {
  name: 'Dashboard',

  data() {
    return {
      list: {},
      newest: [],
      hot_article: []

    }
  },
  created() {

  },
  mounted() {
    this.gettagListApi()
    setTimeout(() => {
      this.echarts = Echarts.init(this.$refs.box)
      this.echarts.setOption(radarData)
      this.echarts = Echarts.init(this.$refs.bbooxx)
      this.echarts.setOption(histogram)
    }, 1000)
  },

  methods: {
    async gettagListApi() {
      const res = await gettagListApi()
      console.log(res)
      this.list = res
      this.newest = res.new_user
      this.hot_article = res.hot_article
      radarData.series[0].data[0].value = res.user.user_man
      radarData.series[0].data[1].value = res.user.user_woman
      // 柱状图
      const list = []
      const num = []
      res.all_cate.forEach(item => list.push(item.catename))
      res.all_cate.forEach(item => num.push(item.num))
      histogram.xAxis.data = list
      histogram.series[0].data = num
    }
  }
}
</script>

<style lang="scss" scoped>
.header{
  text-align: center;
  color: #5470c6;
 font-weight: 700;
}
::v-deep .el-card__header{
  border: none;
}
.el-icon-camera{
  color: #fff;
 font-size: 50px;
 line-height: 100px;
 margin-left: 30px;
 margin-right: 20px;
}
.pp{
  margin: 0;
  margin-top: 6px;
    color: #fff;
    font-size: 18px;
}
.ppp{
  margin: 0;
  margin-top: 30px;
  color: #fff;
  font-size: 18px;
}
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    display: flex;
    // justify-content: space-between;
    border-radius: 4px;
    min-height: 36px;
    height: 100px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .mobileNumber{
    border: solid 1px #EEE;
    h6{
      height: 44px;
      background-color: #dddddd;
      font-size: 17px;
      padding-left: 15px;
      line-height: 44px;
      margin: 0;
    }

  }
  .sonmobile{
    border-bottom: 1px dotted #EEE ;
        height: 40px;
        line-height: 40px;
        padding-left: 15px;
        .span{
          margin-right: 60px;
        }
  }
  .elrow{
   margin-top: 20px;
  }
</style>
